<template>
  <KiFormDialog
    :show.sync="dialogVisible"
    v-model="info"
    title="退款审批"
    :loading="inRequest"
  >
    <div v-if="info" class="text-18px">
      <h4>订单信息</h4>
      <template>
        <p>订单号：{{ info.orderId }}</p>
        <p>支付单号：{{ info.payNo }}</p>
        <p>商品名称：{{ info.productName }}</p>
        <p>数量：{{ info.quantity }}</p>
        <p>金额：{{ info.currentPrice | $cent2yuan }}</p>
        <p>订单状态：{{ info.orderStatusName }}</p>
        <p>支付状态：{{ info.payStatusName }}</p>
        <!--票务-->
        <p v-if="info.businessTypeId == 1">
          票务状态：{{ info.thirdStatusName }}
        </p>
        <!--酒店-->
        <p v-if="info.businessTypeId == 4">入住日期：{{ info.useStartTime }}</p>
        <p v-if="info.businessTypeId == 4">离店日期：{{ info.useEndTime }}</p>
        <!--票务、券类-->
        <p v-if="info.businessTypeId != 5">
          预订人姓名：{{ info.purchaserName }}
        </p>
        <p v-if="info.businessTypeId != 5">
          预订人手机：{{ info.purchaserPhone }}
        </p>
        <!--实物-->
        <p v-if="info.businessTypeId == 5">
          收货人姓名：{{ info.purchaserName }}
        </p>
        <p v-if="info.businessTypeId == 5">
          收货人手机：{{ info.purchaserPhone }}
        </p>
        <p v-if="info.businessTypeId == 5 && info.receiptInfo">
          收货人地址：{{
            info.receiptInfo.areaName ? `${info.receiptInfo.areaName}，` : ''
          }}{{ info.receiptInfo.address }}
        </p>
      </template>

      <h4>店铺信息</h4>
      <template>
        <p>店铺联系人：{{ info.belongSubMerchantContract }}</p>
        <el-row
          type="flex"
          justify="start"
          align="middle"
          style="margin-bottom: 18px"
        >
          <el-col :span="8">店铺联系人手机号：</el-col>
          <el-col :span="9">{{ info.belongSubMerchantPhone }}</el-col>
        </el-row>
      </template>

      <!-- 退款原因 -->
      <template v-if="info.refundApply && info.refundApply.reason">
        <h4>退款原因:</h4>
        <p>{{ info.refundApply.reason }}</p>
      </template>
      <div v-if="info.refundApply && info.refundApply.imageUrl">
        <!-- 实物退款图片 -->
        <Imgpond v-model="info.refundApply.imageUrls" :count="6" disabled />
      </div>

      <hr />
      <template>
        <p>正在申请退款，是否同意？</p>
        <p>原因</p>
        <el-input
          v-model="refuseReason"
          type="textarea"
          placeholder="请输入原因"
          maxlength="50"
        ></el-input>
      </template>
    </div>

    <span slot="footer">
      <el-button @click="refuse" :loading="inRequest">拒绝退款</el-button>
      <el-button type="primary" @click="agree" :loading="inRequest">
        同意退款
      </el-button>
    </span>
  </KiFormDialog>
</template>
<script>
import API from './api'
export default {
  data () {
    return {
      dialogVisible: false,
      refuseReason: '', //拒绝原因
      code: '', // 手机验证码
      orderId: '',
      inRequest: false,
      info: null
    }
  },
  methods: {
    open (orderId) {
      this.refuseReason = ''
      this.orderId = orderId
      this.dialogVisible = true

      API.getOrderInfo({
        orderId
      }).then(({ data }) => {
        this.info = data
      })
    },
    refuse () {
      this.inRequest = true
      API.refusalRefund({
        orderId: this.orderId,
        refuseReason: this.refuseReason
      })
        .then(({ data }) => {
          this.$swal.success('操作成功')
          this.$emit('save')
          this.dialogVisible = false
          this.inRequest = false
        })
        .catch(() => {
          this.inRequest = false
        })
    },
    agree () {
      if (!this.refuseReason) {
        this.$swal.error('请填入退款原因')
        return
      }
      this.inRequest = true
      API.agreeRefund({
        orderId: this.orderId,
        refuseReason: this.refuseReason
      })
        .then(({ data }) => {
          this.$swal.success('操作成功')
          this.$emit('save')
          this.dialogVisible = false
          this.inRequest = false
        })
        .catch(() => {
          this.inRequest = false
        })
    }
  }
}
</script>
